<script src="../main.js"></script>
<template>
  <div>
    <div>
      <el-select v-model="selectArea" placeholder="--请选择所在场所--">
        <el-option v-for="one in areas"  :value="one.dsAreaName" :key="one.dsAreaId" :label="one.dsAreaName">{{ one.dsAreaName }}</el-option>
      </el-select>
      <el-select placeholder="--请选择设备类型--" @change="MacInType" v-model="selectType" style="margin-left: 20px;margin-bottom: 20px" >
        <el-option v-for="one in types" :value="one.dsTypeName" :key="one.dsTypeId" :label="one.dsTypeName">{{ one.dsTypeName }}</el-option>
      </el-select>

      <el-select placeholder="--请选择设备地址--" @change="" v-model="selectMac" style="margin-left: 20px;margin-bottom: 20px" >
        <el-option v-for="one in DeviceMacs" :value="one.deviceMac" :key="one.deviceId" :label="one.deviceMac">{{ one.deviceMac }}</el-option>
      </el-select>

      <el-date-picker
          @change="timeBlockChange"
          style="margin-left: 20px"
          v-model="TimeBlock"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>

      <el-button class="ml-15" type="primary" @click="HistoryQuery">搜索</el-button>
      <el-button class="ml-15" type="success" @click="selectAll()">显示全部</el-button>
    </div>
    <div>
      <template>
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>

          <el-table-column
              label="数据来源时间"
              width="150">
            <template slot-scope="scope">{{ scope.row.createTime }}</template>
          </el-table-column>

          <el-table-column
              prop="name"
              label="设备地址"
              width="120">
            <template slot-scope="scope">{{ scope.row.deviceMac }}</template>
          </el-table-column>

          <el-table-column
              prop="address"
              label="历史数据"
              show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.deviceValue }}</template>
          </el-table-column>
        </el-table>



      </template>
    </div>
    <div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal">
      </el-pagination>
    </div>
    <div style="margin-top: 20px">
    <el-button @click="toggleSelection()">取消选择</el-button>
      <br>
      <br>
      <br>
<!--   前台短信验证   -->
      <button @click="message()">前台验证</button>
<!--   后台验证   -->
      <el-input v-model="telephone"></el-input>
      <button @click="messageback()">后台验证</button>
<!--   MacInArea   -->
      <button @click="macInArea()">sdfasdfasdfasdf</button>
  </div>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        item:{

        },
        tableData: [
          this.item
        ],
        area: {
          createTime: null,
          deleted: null,
          dsAreaId: null,
          dsAreaName: null,
          dsAreaNote: null,
          modifyTime: null
        },
        areas:[
          this.area
        ],
        type:{

        },
        types:[
          this.type
        ],
        pageSize: 10,
        currentPage: 1,
        pageTotal: 5,
        searchValue:"esp8266_F687C9",

        selectArea:"",
        selectType:"",
        selectMac:"",
        selectTimeStart:"",
        selectTimeEnd:"",
        DeviceMacItem:{
          deviceId:"",
          deviceMac:""
        },
        DeviceMacs:[
          // this.DeviceMacItem
        ],
        TimeBlock:"",

        telephone:""
      }
    },

    methods: {
      //请求分页查询
      selectCurrentPageHistory(page, pageSize, name) {
        this.api.HistoryApi.selectHistoryPage(page, pageSize, name)
            .then(res => {
              console.log(res)
              this.pageTotal=res[1]
              this.tableData=[]
              res.forEach(val=>{
                val.forEach(obj=>{
                  this.tableData.push({
                    'createTime':new Date(obj.createTime).getFullYear()+"/"+new Date(obj.createTime).getMonth() + "/" + new Date(obj.createTime).getDate(),
                    'deviceMac':obj.dsDeviceMac,
                    'deviceValue':obj.dsHistoryValue
                  })
                })
              })

            })
            .catch(err => {
              console.log(err)
            })
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      show(mac)
      {
        this.api.HistoryApi.AllTEM(mac).then(res=>{
          if(res.code==="200")
          {
            let data=res.data
            data.forEach(val=>{
              this.tableData.push({
                'createTime':new Date(val.createTime).getFullYear()+"/"+new Date(val.createTime).getMonth() + "/" + new Date(val.createTime).getDate(),
                'deviceMac':val.dsDeviceMac,
                'deviceValue':val.dsHistoryValue
              })
            })
          }
          else {
            this.$message.error(res.meg);
          }
        })
      },
      handleSizeChange(pageSize){
        this.pageSize=pageSize
        // this.selectCurrentPageHistory(this.currentPage,pageSize,this.searchValue)
        this.HistoryQuery()
      },
      handleCurrentChange(currentPage){
        this.currentPage=currentPage
        // this.selectCurrentPageHistory(currentPage,this.pageSize,this.searchValue)
        this.HistoryQuery()
      },

      //前台短信验证
      message(){
        this.api.messageApi.message(8546)
        console.log("send!")
      },
      //后台验证
      messageback() {
        this.api.messageApi.messagBack(this.telephone);
        console.log("backsend")
      },

      MacInType(){
        this.selectMac=""
        this.api.HistoryApi.MacInType(this.selectType).then(
            res=>{
              console.log(res)
              var Items=[];
              var Item={
                deviceId: "",
                deviceMac: ""
              };
              var index=1;
              res.forEach(obj=>{
                Items.push({
                  deviceId:index++,
                  deviceMac:obj
                })
              })
              this.DeviceMacs=Items
            },
            err=>{
              console.log(err)
            }
        )
      },
      //标准时间转为yymmdd
      timeChangeTo(value){
        let d = new Date(value);
        let datetime=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
        return datetime
        },
      timeBlockChange(){
        let TimeSElement=this.TimeBlock[0]
        this.selectTimeStart=this.timeChangeTo(TimeSElement)
        console.log(this.selectTimeStart)
        let TimeEElement=this.TimeBlock[1]
        this.selectTimeEnd=this.timeChangeTo(TimeEElement)
        console.log(this.selectTimeEnd)
      },
      //历史数据查询
      HistoryQuery(){
        this.api.HistoryApi.HistoryQuerry(this.selectArea,this.selectType,this.selectMac,this.selectTimeStart,this.selectTimeEnd,this.currentPage,this.pageSize).then(
            res=>{
              this.tableData=[]
              res[0].forEach(val=>{
                  this.tableData.push({
                    'createTime':new Date(val.createTime).toLocaleString(),
                    'deviceMac':val.dsDeviceMac,
                    'deviceValue':val.dsHistoryValue
                  })
              })
              this.pageTotal=res[1]
            },
            err=>{
              console.log(err)
            }
        )
      },
      //全部历史数据
      selectAll(){
        this.selectArea="",
        this.selectType="",
        this.selectMac="",
        this.selectTimeStart="",
        this.selectTimeEnd="",
        this.HistoryQuery()
      }
    },
    mounted() {
      this.api.areaApi.selectAreas()
        .then(res => {this.areas = res})
        .catch(error => {console.log(error)})
      this.api.typeApi.selectTypes()
          .then(
              res => {
                console.log(res)
                this.types = res
              }
          )
          .catch(err => {console.log(err)})
      this.HistoryQuery()
      //初始化界面数据
      this.selectCurrentPageHistory(this.currentPage,this.pageSize,this.searchValue)

    }
  }
</script>

<style>

</style>